﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport" content="width=device-width" />
    <link href="../Styles/jquery.mobile-1.0b1.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/scrollbar.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/lib/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/lib/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script src="../Scripts/lib/jquery.mobile-1.0b1.js" type="text/javascript"></script>
    <style>
        .header-title
        {
            float: left;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            margin: 4px;
            line-height: 32px;
        }
        .img-button
        {
            position: absolute;
            right: 4px;
        }
        #projects .div-project
        {
            background: #fdfdfd;
            background: -moz-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(99%, #efefef));
            background: -webkit-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
            background: -o-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
            background: -ms-linear-gradient(top, #fdfdfd 0%, #efefef 100%);
            background: linear-gradient(top, #fdfdfd 0%, #efefef 100%);
            overflow: hidden;
            border: 0px;
            border-bottom: 1px solid #CCC;
            height: 100%;
            display: block;
            position: relative;
        }
        #projects .txt-delaied
        {
            color: #fa0000;
        }
        #projects .txt-diff
        {
            color: #888;
            margin-top: 14px;
        }
        
        #projects .div-workitem
        {
            width: 8px;
            height: 100%;
            display: table-cell;
            border-radius: 4px 0px 0px 4px;
            -webkit-transition: border 0.3s ease;
            position: absolute;
        }
        #projects .div-workitem .txt-workitem-finished
        {
            background: #3ba365;
        }
        #projects .div-workitem .txt-workitem-expired
        {
            background: #e8465f;
        }
        #projects .div-workitem .txt-workitem-unfinished
        {
            background: #999999;
        }
        #projects .div-project a.ezlink
        {
            color: #333333;
        }
        #projects .div-project a.ezlink:hover
        {
            text-decoration: none;
            color: #666;
        }
        #projects .div-project .txt-projectname
        {
            font-size: 18px;
            font-weight: bold;
        }
        #projects .div-project .txt-projectExplanation
        {
            font-size: 12px;
            color: #888;
            font-weight: normal;
            display: block;
            margin: -0.5em 5em 0.6em 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: normal;
            line-height: 14px;
        }
        .tabs
        {
            background: #f1f1f1; /* Old browsers */
            background: -moz-linear-gradient(top, #f1f1f1 0%, #d5d5d5 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(99%,#d5d5d5)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* Opera11.10+ */
            background: -ms-linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* IE10+ */
            background: linear-gradient(top, #f1f1f1 0%,#d5d5d5 100%); /* W3C */
            -webkit-box-shadow: 1px 1px 5px #666;
            height: 28px;
        }
        .tabs #arrow
        {
            height: 10px;
            position: fixed;
            background: url(../Styles/app-arrow.png) repeat-x 40px;
        }
        .tabs .tabs-arrow
        {
            width: 100%;
            top: 66px;
            position: absolute;
        }
        .tabs .tab-item
        {
            width: 100%;
            top: 48px;
            font-size: 10px;
            color: #666;
            position: absolute;
        }
        .tabs .tab-feed
        {
            text-align: center;
        }
        .tabs .tab-contact
        {
            text-align: left;
        }
        .tabs .tab-project
        {
            text-align: right;
        }
        .tabs .tab-current
        {
            color: #000;
            font-size: 11px;
            font-weight: bold;
        }
        .tabs .txt-item
        {
            padding: 0 8px;
        }
       
    </style>
    <script>

        $(function () {
            var windowWidth = document.documentElement.clientWidth;

            $('#arrow').css({
                right: 0,
                left: (windowWidth - 106) / 2
            })

        });
    </script>
</head>
<body class="ui-mobile-viewport">
    <div data-role="page" class="type-interior ui-page ui-body-c ui-page-active">
        <div data-role="header" data-theme="a" class="ui-bar-f ui-header" role="banner">
            <div tabindex="0" role="heading" aria-level="1">
                <span class="header-title">Ezdesk</span>
                <div class="img-button">
                    <img src="../Styles/add.png" style="width: 28px; height: 28px; padding: 6px; border-left: 1px #aaa solid;" />
                </div>
            </div>
        </div>
        <!-- /header -->
        <div class="tabs">
            <div class="tabs-arrow">
                <div id="arrow">
                </div>
            </div>
            <div class="tab-item tab-contact">
                <span class="txt-item">联系人</span>
            </div>
            <div class="tab-item tab-feed">
                <span class="txt-item">消息</span>
            </div>
            <div class="tab-item tab-project  tab-current">
                <span class="txt-item">项目</span>
            </div>
        </div>
        <!-- /tabs -->
        <div id="projects" data-role="content" class="ui-content" role="main">
            <div class="content-primary">
                <ul data-role="listview" class=" ui-listview ">
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                        <div class="ui-btn-inner ui-li">
                            <div class="div-workitem">
                                <div class="txt-workitem-unfinished" style="height: 67%;">
                                </div>
                                <div class="txt-workitem-expired" style="height: 1%;">
                                </div>
                                <div class="txt-workitem-finished" style="height: 34%;">
                                </div>
                            </div>
                            <div class="ui-btn-text">
                                <div class="ui-li-aside ui-li-desc txt-diff">
                                    <strong>剩余31天</strong></div>
                                <a href="index.html" class="ui-link-inherit">
                                    <h3 class="ui-li-heading">
                                        Stephen Weber</h3>
                                    <p class="ui-li-desc">
                                        Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                        jQuery team.</p>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                        <div class="ui-btn-inner ui-li">
                            <div class="div-workitem">
                                <div class="txt-workitem-unfinished" style="height: 36%;">
                                </div>
                                <div class="txt-workitem-expired" style="height: 4%;">
                                </div>
                                <div class="txt-workitem-finished" style="height: 60%;">
                                </div>
                            </div>
                            <div class="ui-btn-text">
                                <a href="index.html" class="ui-link-inherit">
                                    <h3 class="ui-li-heading">
                                        jQuery Team</h3>
                                    <p class="ui-li-desc">
                                        In preparation for the upcoming conference in Boston, we need to start gathering
                                        a list of sponsors and speakers.</p>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                        <div class="ui-btn-inner ui-li">
                            <div class="div-workitem">
                                <div class="txt-workitem-unfinished" style="height: 1%;">
                                </div>
                                <div class="txt-workitem-expired" style="height: 1%;">
                                </div>
                                <div class="txt-workitem-finished" style="height: 101%;">
                                </div>
                            </div>
                            <div class="ui-btn-text">
                                <div class="ui-li-aside ui-li-desc txt-delaied">
                                    <strong>过期3天</strong></div>
                                <a href="index.html" class="ui-link-inherit">
                                    <h3 class="ui-li-heading">
                                        Avery Walker</h3>
                                    <p class="ui-li-desc">
                                        Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
                                    </p>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                        <div class="ui-btn-inner ui-li">
                            <div class="div-workitem">
                                <div class="txt-workitem-unfinished" style="height: 60%;">
                                </div>
                                <div class="txt-workitem-expired" style="height: 10%;">
                                </div>
                                <div class="txt-workitem-finished" style="height: 30%;">
                                </div>
                            </div>
                            <div class="ui-btn-text">
                                <a href="index.html" class="ui-link-inherit">
                                    <h3 class="ui-li-heading">
                                        天使艾米丽</h3>
                                    <p class="ui-li-desc">
                                        4-for-3 Store, you may be
                                    </p>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                        <div class="ui-btn-inner ui-li">
                            <div class="div-workitem">
                                <div class="txt-workitem-unfinished" style="height: 30%;">
                                </div>
                                <div class="txt-workitem-expired" style="height: 30%;">
                                </div>
                                <div class="txt-workitem-finished" style="height: 40%;">
                                </div>
                            </div>
                            <div class="ui-btn-text">
                                <a href="index.html" class="ui-link-inherit">
                                    <h3 class="ui-li-heading">
                                        罗丹的情人</h3>
                                    <p class="ui-li-desc">
                                        As someone who has purchased children's
                                    </p>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                        <div class="ui-btn-inner ui-li">
                            <div class="div-workitem">
                                <div class="txt-workitem-unfinished" style="height: 10%;">
                                </div>
                                <div class="txt-workitem-expired" style="height: 20%;">
                                </div>
                                <div class="txt-workitem-finished" style="height: 70%;">
                                </div>
                            </div>
                            <div class="ui-btn-text">
                                <div class="ui-li-aside ui-li-desc txt-diff">
                                    <strong>剩余2天</strong></div>
                                <a href="index.html" class="ui-link-inherit">
                                    <h3 class="ui-li-heading">
                                        黑暗中的舞者</h3>
                                    <p class="ui-li-desc">
                                        you may be interested in these featured books.</p>
                                </a>
                            </div>
                        </div>
                    </li>
                    <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                        <div class="ui-btn-inner ui-li">
                            <div class="div-workitem">
                                <div class="txt-workitem-unfinished" style="height: 20%;">
                                </div>
                                <div class="txt-workitem-expired" style="height: 20%;">
                                </div>
                                <div class="txt-workitem-finished" style="height: 60%;">
                                </div>
                            </div>
                            <div class="ui-btn-text">
                                <div class="ui-li-aside ui-li-desc txt-diff">
                                    <strong>剩余19天</strong></div>
                                <a href="index.html" class="ui-link-inherit">
                                    <h3 class="ui-li-heading">
                                        情人</h3>
                                    <p class="ui-li-desc">
                                        游戏界面由iPhone拍摄的实景模拟而成</p>
                                </a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--/content-primary -->
        </div>
        <!-- /content -->
    </div>
</body>
</html>
